<template>
  <div class="gl_contentBox gl_heightFull">
    <!-- 查询 -->
    <div class="gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>新闻类型</p>
          <el-select v-model="newsQO.newsTypeId" size="small" placeholder="请选择新闻类型" clearable filterable @change="getPageList()">
            <el-option v-for="item in newsTypeList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>时间</p>
          <el-date-picker
            v-model="dateRange"
            clearable
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="small"
            type="datetimerange"
            placeholder="请选择时间"
            style="width: 100%;"
            @change="handleDateRange()"
          />
        </el-col>
        <el-col :md="6" :lg="6">
          <p>搜索</p>
          <el-input v-model="newsQO.Filter" prefix-icon="el-icon-search" placeholder="请输入关键词进行搜索" size="small" clearable @change="getPageList()" />
        </el-col>
        <el-col :span="6" :lg="10 " align="right" class="search_btn">
          <!-- 查询按钮 -->
          <el-button type="primary" size="mini" @click="getPageList()">{{ $t('button.query') }}</el-button>
          <!-- 重置按钮 -->
          <el-button type="warning" size="mini" @click="initForm()">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="gl_my_15">
      <el-button type="primary" size="mini" @click="gotoEditNews()">新增</el-button>
    </div>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%" class="gl_table_noBorder" :border="false" stripe size="mini">
      <!-- 通用-序号 -->
      <el-table-column type="index" label="序号" align="center" width="50" />
      <el-table-column prop="coverImage" label="封面图" align="center">
        <template slot-scope="{row}">
          <img :src="getStaticFileUrl(row.coverImage)" alt="banner" class="img_item">
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" align="center" />
      <el-table-column prop="id" label="ID" align="center" width="250" />
      <el-table-column prop="newsType" label="类型" align="center">
        <template slot-scope="{row}">
          <div>{{ row.newsType && row.newsType.name ? row.newsType.name : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="author" label="作者" align="center" />
      <el-table-column prop="creationTime" label="创建时间" align="center" />
      <el-table-column prop="operating" label="操作" align="center" width="250">
        <template slot-scope="{row,$index}">
          <el-button type="text" size="mini" @click="gotoEditNews(row)">编辑</el-button>
          <el-button type="text" size="mini" @click="pubishItem(row)">
            <span class="gl_color_success">{{ row.isPublished ? '取消发布' : '发布' }}</span>
          </el-button>
          <el-button type="text" size="mini" @click="topItem(row)">
            <span class="gl_color_warning">{{ row.isTop ? '取消置顶' : '置顶' }}</span>
          </el-button>
          <el-button type="text" size="mini" @click="previewItem(row)">预览</el-button>
          <el-button type="text" size="mini" @click="deleteItem(row,$index)">
            <span class="gl_color_error">删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row style="text-align: right;" class="gl_pb_15 gl_mr_15">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="newsQO.MaxResultCount"
        :current-page="newsQO.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>

    <!-- 预览弹窗 -->
    <el-dialog
      class="gl_dialog_TitleLine"
      width="420px"
      title="预览"
      :visible.sync="isPreview"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <mobilePreview :item="previewData" />
    </el-dialog>
  </div>
</template>

<script>
import { FormatDate } from '@/lib';
import mobilePreview from './mobilePreview.vue';
import {
  api_GET_EventsManagementNews,
  api_DELETE_EventsManagementNewsId, // 删除新闻
  api_PUT_EventsManagementNewsIdNewsPublishStatus, // 修改发布状态
  api_PUT_EventsManagementNewsIdNewsTopStatus, // 修改置顶状态
  api_GET_EventsManagementNewsType
} from '@/extend/api/gameswaggerApi/app.js';
import { Api_GET_EventsManagementNewsQO } from '@/lib/form/game/swaggerForm.js';
export default {
  components: {
    mobilePreview
  },
  data() {
    return {
      newsQO: new Api_GET_EventsManagementNewsQO(),
      newsTypeList: [], // 新闻类型
      loading: false,
      tableData: [],
      total: 0,
      dateRange: [],
      // 预览
      isPreview: false,
      previewData: {}
    };
  },
  created() {
    this.getPageList();
    this.getNewsType();
  },
  methods: {
    getPageList(page) {
      this.loading = true;
      this.newsQO.Page = page || 1;
      this.newsQO.SkipCount = (this.newsQO.Page - 1) * this.newsQO.MaxResultCount;
      this.newsQO.IncludeNewsType = true;
      this.newsQO.IsPublished = null;
      this.newsQO.IsTop = null;
      api_GET_EventsManagementNews(this.newsQO).then(
        res => {
          this.tableData = res.items || [];
          this.total = res.totalCount || 0;
          this.tableData.map(item => {
            item.creationTime = item.creationTime ? FormatDate(item.creationTime, 'yyyy-MM-dd HH:mm:ss') : '';
          });
          this.loading = false;
        },
        error => {
          this.loading = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        }
      );
    },
    // 新增或编辑
    gotoEditNews(row) {
      const id = row ? row.id : '';
      this.$router.push({
        name: 'editNews',
        query: {
          id: id
        }
      });
    },
    // 发布
    pubishItem(row) {
      const msg = row.isPublished ? '已取消发布' : '发布成功';
      api_PUT_EventsManagementNewsIdNewsPublishStatus(
        row.id,
        {
          isPublish: !row.isPublished
        }
      ).then(
        () => {
          this.$message({ type: 'success', message: msg });
          this.getPageList();
        },
        error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        }
      );
    },
    // 预览
    previewItem(row) {
      this.previewData = row;
      this.isPreview = true;
    },
    // 置顶
    topItem(row) {
      const msg = row.isTop ? '已取消置顶' : '置顶成功';
      api_PUT_EventsManagementNewsIdNewsTopStatus(
        row.id,
        {
          isTop: !row.isTop
        }
      ).then(
        () => {
          this.$message({ type: 'success', message: msg });
          this.getPageList();
        },
        error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        }
      );
    },
    // 删除
    deleteItem(row) {
      this.$confirm(`您确定要删除该条新闻吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          api_DELETE_EventsManagementNewsId(row.id).then(
            () => {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getPageList();
            },
            error => {
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            }
          );
        });
    },
    // 获取新闻类型
    getNewsType() {
      api_GET_EventsManagementNewsType().then(
        res => {
          this.newsTypeList = res.items || [];
        },
        error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        }
      );
    },
    // 处理日期
    handleDateRange() {
      this.newsQO.StartTime = this.dateRange && this.dateRange[0];
      this.newsQO.EndTime = this.dateRange && this.dateRange[1];
      this.getPageList();
    },
    initForm() {
      this.newsQO.newsTypeId = '';
      this.dateRange = [];
      this.newsQO.StartTime = '';
      this.newsQO.EndTime = '';
      this.newsQO.Filter = '';
      this.getPageList();
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.newsQO.MaxResultCount = pagesize;
      this.getPageList();
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style lang="scss">
.img_item {
  width: 121px;
  height: 77px;
  margin-right: 20px;
}
</style>
